<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="model" inline>
        <el-form-item label="">
          <el-input v-model="model.keyStr" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-select class="w-30" v-model="model.Province" placeholder="请选择">
            <el-option v-for="province in provinceList" :key="province" :label="province" :value="province" />
          </el-select>
        </el-form-item>
        <el-form-item label="代理品牌">
          <el-select class="w-30" v-model="model.BrandName" placeholder="请选择">
            <!-- <el-option v-for="province in provinceList" :key="province" :label="province" :value="province" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="接单员">
          <el-select class="w-30" v-model="model.OrderClerkName" placeholder="请选择">
            <el-option v-for="item in orderDataStore.orderTakerInfo" :key="item.orderTaker" :label="item.orderTaker"
              :value="item.orderTaker" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务员">
          <el-select class="w-30" v-model="model.SalesmanName" placeholder="请选择">
            <el-option v-for="item in orderDataStore.businessmanInfo" :key="item.businessman" :label="item.businessman"
              :value="item.businessman" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="getData">搜索</el-button>
          <el-button :icon="Refresh">重置</el-button>
        </el-form-item>
        <el-form-item class="float-right">
          <el-button type="primary" :icon="Plus" @click="handleAdd">添加客户</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" class="w-full">
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column label="客户" prop="UserName"> </el-table-column>
        <el-table-column label="省份" prop="Province"> </el-table-column>
        <el-table-column label="城市" prop="City"> </el-table-column>
        <el-table-column label="县/区" prop="Country"> </el-table-column>
        <el-table-column label="操作" prop="operation" width="230" align="center">
          <template v-slot="{ $index }">
            <el-button type="primary" link @click="handleEdit('info', $index)">修改</el-button>
            <!-- <el-button type="danger" link @click="handleDelete($index)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddressModal :openModal="openAddrModal" :id="currentIndex" @close="openAddrModal = false" />
    <!-- <InfoModal
      :openModal="openInfoModal"
      :data="dataList[currentIndex]"
      :update="update"
      @close="openInfoModal = false"
      @reload="reloadInfo"
    /> -->
    <EditModal :openModal="openInfoModal" :data="dataList[currentIndex]" :update="update" @close="openInfoModal = false"
      @reload="reloadInfo" />
    <LogModal :openModal="openLogModal" @close="openLogModal = false" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { provinceList } from "../../../../utils/city";
import { Plus, Refresh, Search } from "@element-plus/icons-vue";
import AddressModal from "./components/AddressModal.vue";
import InfoModal from "./components/InfoModal.vue";
import EditModal from "./components/EditModal.vue";
import LogModal from "./components/LogModal.vue";
import useOrderDataStore from "@/store/modules/orderData";
import { customerQueryApi, customerUpdateApi } from "@/api/order/customer";

const orderDataStore = useOrderDataStore();
const model = ref({
  keyStr: "",
  UserType: "",
  Province: "",
  BrandName: "",
  OrderClerkName: "",
  SalesmanName: "",
  PageIndex: 1,
  PageSize: 10,
});
const dataList = ref([]);
const openAddrModal = ref(false);
const openInfoModal = ref(false);
const openLogModal = ref(false);
const currentIndex = ref(0);
const update = ref(false);

const feature = ref();
onMounted(() => {
  getData();
});
async function getData() {
  const res = await customerQueryApi(model.value);
  dataList.value = res.Data || [];
  dataList.value.forEach(item => {
    if (item.Province.split('-').length > 1) {
      let [p, city, country] = item.Province.split('-')
      item.Province = p
      if (city) item.City = city
      if (country) item.Country = country
    }
  })
}
function handleEdit(type, $index) {
  currentIndex.value = $index;
  update.value = true;
  switch (type) {
    case "info":
      openInfoModal.value = true;
      break;
    case "addr":
      openAddrModal.value = true;
      break;
    case "log":
      openLogModal.value = true;
      break;
  }
}
function handleDelete(i) {
  dataList.value.splice(i, 1);
}
async function reloadInfo(form, update) {
  if (update) {
    await customerUpdateApi({ ...form, UserId: dataList.value[currentIndex.value].UserId })
  } else {
    await customerUpdateApi({ ...form, UserId: 0 })
  }
  await getData()
  // console.log(dataList.value[currentIndex.value]);
}
function handleAdd() {
  update.value = false;
  openInfoModal.value = true;
}
</script>
